<template>
	<view class="main-list oBorder">
		<!-- 文本框 -->
		<input class="main-input" :value="value" :type="_type" :maxlength="maxlength" :placeholder="placeholder" :password="type === 'password' && !showPassword" @input="onInput" />
		<!-- 是否可见密码 -->
		<image
			v-if="_isShowPass && type === 'password' && !_isShowCode"
			class="img cuIcon"
			:src="showPassword ? '/static/images/middle_icon_selected@2x.png' : '/static/images/middle_icon_normal@2x.png'"
			@tap="showPass"
			mode="widthFix"
		></image>
		<!-- 倒计时 -->
		<view v-if="_isShowCode && !_isShowPass" :class="['vercode', { 'vercode-run': second > 0 }]" @click.stop="setCode">{{ second <= 0?codeText:second }}</view>
	</view>
</template>

<script>
var _this, countDown;
export default {
	data() {
		return {
			showPassword: false, //是否显示明文
			second: 0, //倒计时
			isRunCode: false //是否开始倒计时
		};
	},
	props: {
		type: String, //类型
		value: String, //值
		placeholder: String, //框内提示
		maxlength: {
			//最大长度
			type: [Number, String],
			default: 20
		},
		isShowPass: {
			//是否显示密码图标（二选一）
			type: [Boolean, String],
			default: false
		},
		isShowCode: {
			//是否显示获取验证码（二选一）
			type: [Boolean, String],
			default: false
		},
		codeText: {
			type: String,
			default: '获取验证码'
		},
		setTime: {
			//倒计时时间设置
			type: [Number, String],
			default: 60
		}
	},
	model: {
		prop: 'value',
		event: 'input'
	},
	mounted() {
		_this = this;
		//准备触发
		this.$on('runCode', val => {
			this.runCode(val);
		});
		clearInterval(countDown); //先清理一次循环，避免缓存
	},
	methods: {
		showPass() {
			//是否显示密码
			this.showPassword = !this.showPassword;
			console.log(this.showPassword)
		},
		onInput(e) {
			//传出值
			this.$emit('input', e.target.value);
		},
		setCode() {
			//设置获取验证码的事件
			if (this.isRunCode) {
				//判断是否开始倒计时，避免重复点击
				return false;
			}
			this.$emit('setCode');
		},
		runCode(val) {
			//开始倒计时
			if (String(val) == '0') {
				//判断是否需要终止循环
				this.second = 0; //初始倒计时
				clearInterval(countDown); //清理循环
				this.isRunCode = false; //关闭循环状态
				return false;
			}
			if (this.isRunCode) {
				//判断是否开始倒计时，避免重复点击
				return false;
			}
			this.isRunCode = true;
			this.second = this._setTime; //倒数秒数

			let _this = this;
			countDown = setInterval(function() {
				_this.second--;
				if (_this.second == 0) {
					_this.isRunCode = false;
					clearInterval(countDown);
				}
			}, 1000);
		}
	},
	computed: {
		_type() {
			//处理值
			const type = this.type;
			if(type == 'digit') {
				return type;
			} else {
				return type == 'password' ? 'text' : type;
			}
		},
		_isShowPass() {
			//处理值
			return String(this.isShowPass) !== 'false';
		},
		_isShowCode() {
			//处理值
			return String(this.isShowCode) !== 'false';
		},
		_setTime() {
			//处理值
			const setTime = Number(this.setTime);
			return setTime > 0 ? setTime : 60;
		},
		getVerCodeSecond() {
			//验证码倒计时计算
			if (this.second <= 0) {
				return this.codeText;
			} else {
				if (this.second < 10) {
					return '0' + this.second;
				} else {
					return this.second;
				}
			}
		}
	}
};
</script>

<style scoped lang="scss">
.main-list {
	/* height: 100%; */
	position: relative;
}
.img {
	width: 37rpx;
	position: absolute;
	right: 0;
	top: 28rpx;
	z-index: 101;
}
.main-input {
	height: 78rpx;
	line-height: 78rpx;
	font-size: 30rpx;
	color: #333;
	letter-spacing: 1.71;
	border-bottom: 1rpx solid #e7e7e7;
	/* margin-bottom: 10rpx; */
}
.vercode {
	/* width: 100rpx;
	height: 100%;
	background-color: gray; */
	z-index: 101;
	position: absolute;
	right: 0;
	top: 0;
	color: $uni-color1;
	font-size: 24upx;
	line-height: 100upx;
}
.vercode-run {
	color: $uni-color1;
}
</style>
